
class ColorCell extends egret.Sprite {
    value: number;
    size: number;
    bg: Sprite;
    constructor(val: number, size: number) {
        super();
        this.value = val;
        this.size = size;
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    onAddToStage() {
        this.bg = XUI.Rect(this.size - 2, this.size - 2, this.value);
        this.addChild(this.bg);
    }
    draw() {
        if (this.contains(this.bg))
            this.removeChild(this.bg);
        if (this.value != 0) {
            this.bg = XUI.Rect(this.size - 2, this.size - 2, this.value);
            this.addChild(this.bg);
        }

    }
}

class FlatternCube extends eui.Component {
    constructor() {
        super();
        this.skinName = "resource/ui/CubeFlat.exml";
    }
}
class QuestionPanel extends eui.Component {
    constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE, this.onUIComplete, this);
        this.skinName = "resource/ui/QuestionPanel.exml";
    }

    private onUIComplete(): void {
        this.submit.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onSubmit, this);
        this.$children.forEach(child => {
            if (child instanceof eui.Rect) {
                child.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickColor, this);
            }
        });
    }
    onAddToStage() {
    }
    onSubmit(e: egret.TouchEvent) {
        let obj = (e.currentTarget) as eui.Rect;
        console.log(obj.fillColor);
    }
    onClickColor(e: egret.TouchEvent) {
        let obj = (e.currentTarget) as eui.Rect;
        if (obj == this.c11 || obj == this.c12 || obj == this.c13 || obj == this.c14 || obj == this.c15 || obj == this.c16) {
            this.q1.fillColor = obj.fillColor;
        } else if (obj == this.c21 || obj == this.c22 || obj == this.c23 || obj == this.c24 || obj == this.c25 || obj == this.c26) {
            this.q2.fillColor = obj.fillColor;
        } else if (obj == this.c31 || obj == this.c32 || obj == this.c33 || obj == this.c34 || obj == this.c35 || obj == this.c36) {
            this.q3.fillColor = obj.fillColor;
        }
    }

    getUserColors() {
        return [this.q1.fillColor, this.q2.fillColor, this.q3.fillColor];
    }

    setMark(marks: any[]) {
        this.mark1.text = (marks[0] === 1) ? "√" : "x";
        this.mark2.text = (marks[1] === 1) ? "√" : "x";
        this.mark3.text = (marks[2] === 1) ? "√" : "x";
        this.mark1.textColor = (marks[0] === 1) ? XColor.Green : XColor.Red;
        this.mark2.textColor = (marks[1] === 1) ? XColor.Green : XColor.Red;
        this.mark3.textColor = (marks[2] === 1) ? XColor.Green : XColor.Red;
    }

    public submit: eui.Rect;
    private mark1: eui.Label;
    private mark2: eui.Label;
    private mark3: eui.Label;
    private q1: eui.Rect;
    private q2: eui.Rect;
    private q3: eui.Rect;
    private c11: eui.Rect;
    private c12: eui.Rect;
    private c13: eui.Rect;
    private c14: eui.Rect;
    private c15: eui.Rect;
    private c16: eui.Rect;
    private c21: eui.Rect;
    private c22: eui.Rect;
    private c23: eui.Rect;
    private c24: eui.Rect;
    private c25: eui.Rect;
    private c26: eui.Rect;
    private c31: eui.Rect;
    private c32: eui.Rect;
    private c33: eui.Rect;
    private c34: eui.Rect;
    private c35: eui.Rect;
    private c36: eui.Rect;
}
var colorMap = {
    0: XColor.Red,
    1: XColor.Orange,
    2: XColor.Blue,
    3: XColor.Lime,
    4: XColor.Pink,
    5: XColor.Yellow,

}

class GamePage extends eui.Component {

    constructor(world: string) {
        super();

        if (world === "??") {
            this.game = new ColorCubeGame(questions[Math.floor(Math.random() * 10)]);
        } else if (world === "xx") {

        } else {
            this.game = new ColorCubeGame(questions[Number(world) - 1]);
        }

        this.list = this.game.fromMat2List();
        let max = this.list.length / 2, min = this.list.length / 4;
        this.idx1 = Math.floor(Math.random() * (max - min + 1) + min);
        max = this.list.length * 3 / 4, min = this.list.length / 2;
        this.idx2 = Math.floor(Math.random() * (max - min + 1) + min);
        this.idx3 = this.list.length - 1;
        this.addEventListener(eui.UIEvent.COMPLETE, this.onUIComplete, this);
        this.skinName = "resource/ui/GamePage.exml";
    }

    private onUIComplete(): void {
        this.btReturn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onBtReturnClick, this);
        this.questionPanel.submit.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onBtSubmitClick, this);

        this.data['cur'] = 0;
        this.data['best'] = egret.localStorage.getItem(this.key) || '99999';
        this.initGridBox();

        this.timer = new egret.Timer(1000, 0);
        this.timer.addEventListener(egret.TimerEvent.TIMER, () => {
            this.data['cur']++;
        }, this);
        this.timer.start();
    }

    /** 返回选择界面 */
    onBtReturnClick(e: egret.TouchEvent) {
        this.parent.removeChild(this);
    }

    /** 提交答案 */
    onBtSubmitClick(e: egret.TouchEvent) {
        this.list.forEach(ele => {
            // this.grid[ele[0]][ele[1]].fillColor = colorMap[ele[2]];
            let target = this.grid[ele[0]][ele[1]];
            egret.Tween.get(target).to({ fillColor: colorMap[ele[2]] }, 100);

        });
        let ans = this.questionPanel.getUserColors();
        let marks = [
            ans[0] === colorMap[this.list[this.idx1][2]] ? 1 : 0,
            ans[1] === colorMap[this.list[this.idx2][2]] ? 1 : 0,
            ans[2] === colorMap[this.list[this.idx3][2]] ? 1 : 0];
        this.questionPanel.setMark(marks);
        if(eval(marks.join("+")) === 3) {
            this.timer.stop();
            this.data['best'] = this.data['cur'];
            this.gameOver.visible = true;
        }
    }

    private initGridBox() {

        let w = this.gridBox.width / 10;

        this.grid = new Array<eui.Rect[]>(10)
        for (let r = 0; r < 10; r++) {
            this.grid[r] = new Array<eui.Rect>(10);
            for (let c = 0; c < 10; c++) {
                this.grid[r][c] = new eui.Rect(w, w, XColor.WhiteSmoke);
                this.grid[r][c].x = c * w;
                this.grid[r][c].y = r * w;
                this.grid[r][c].strokeWeight = 1;
                this.grid[r][c].visible = this.game.isCellVisible(r, c);
                this.gridBox.addChild(this.grid[r][c]);
            }
        }
        let startcell = this.game.getStartCell();
        this.grid[startcell[0]][startcell[1]].fillColor = colorMap[startcell[2]];
        let t = new eui.Label("开始点");
        t.textColor = XColor.Black;
        let [r, c] = startcell.slice(0, 2);
        t.x = this.grid[r][c].x + 10;
        t.y = this.grid[r][c].y + 30;
        this.gridBox.addChild(t);

        let t1 = new eui.Label("1");
        t1.textColor = XColor.Black;
        t1.size = 48;
        [r, c] = this.list[this.idx1].slice(0, 2);
        t1.x = this.grid[r][c].x + 10;
        t1.y = this.grid[r][c].y + 10;
        this.gridBox.addChild(t1);
        let t2 = new eui.Label("2");
        t2.textColor = XColor.Black;
        t2.size = 48;
        [r, c] = this.list[this.idx2].slice(0, 2);
        t2.x = this.grid[r][c].x + 10;
        t2.y = this.grid[r][c].y + 10;
        this.gridBox.addChild(t2);
        let t3 = new eui.Label("3");
        t3.textColor = XColor.Black;
        t3.size = 48;
        [r, c] = this.list[this.idx3].slice(0, 2);
        t3.x = this.grid[r][c].x + 10;
        t3.y = this.grid[r][c].y + 10;
        this.gridBox.addChild(t3);

    }




    private btReturn: eui.Button;
    private gridBox: eui.Group;
    private gameOver: eui.Group;
    private questionPanel: QuestionPanel;

    private size: number = 10;
    private key: string;
    private timer: egret.Timer;
    private data = {};
    private game: ColorCubeGame;
    private grid: eui.Rect[][];
    private list: any[];
    private idx1: number;
    private idx2: number;
    private idx3: number;

}